<template>
	<div class="star" :class="starType">
		<span 
		v-for="item in itemClasses"
		:class="item" class="star-item"
		track-by = "$index"
		>
			
		</span>
	</div>
</template>

<script>
var LENGTH = 5;
var CLS_ON = 'on';
var CLS_HALF = 'half';
var CLS_OFF = 'off';
export default {
    props: {
        size: {
            type: Number
        },
        score: {
            type: Number
        }
    },
    data: function() {
        return {};
    },
    computed: {
        starType: function() {
            return 'star-' + this.size;
        },
        itemClasses: function() {
            var result = [];
            var score = Math.floor(this.score * 2) / 2;
            var hasD = score % 1 !== 0;
            var integer = Math.floor(score);
            for (var i = 0; i < integer; i++) {
                result.push(CLS_ON);
            }
            if (hasD) {
                result.push(CLS_HALF);
            }
            while (result.length < LENGTH) {
                result.push(CLS_OFF);
            }
            return result;
        }
    },
	created:function(){
		//console.log(this.itemClasses)
	}
};
</script>

<style lang="stylus" scoped="scoped">
	@import "../../common/stylus/mixin.styl"
	.star {
		font-size: 0;
	}
	.star-item {
		display: inline-block;
		background-repeat: no-repeat;
	}
	.star.star-48 {
		
	}
	.star.star-36 {
		
	}
	.star.star-24 {
		
	}
	.star.star-48 .star-item{
		width: 20px;
		height: 20px;
		margin-right: 22px;
		background-size: 20px 20px;
	}
	.star.star-48 .star-item:last-child {
		margin-right: 0px;
	}
	.star.star-48 .star-item.on {
		bg-image('star48_on')
	}
	.star.star-48 .star-item.half {
		bg-image('star48_half')
	}
	.star.star-48 .star-item.off {
		bg-image('star48_off')
	}
	
	
	.star.star-36 .star-item{
		width: 15px;
		height: 15px;
		margin-right: 6px;
		background-size: 15px 15px;
	}
	.star.star-36 .star-item:last-child {
		margin-right: 0px;
	}
	.star.star-36 .star-item.on {
		bg-image('star36_on')
	}
	.star.star-36 .star-item.half {
		bg-image('star36_half')
	}
	.star.star-36 .star-item.off {
		bg-image('star36_off')
	}
	
	
	.star.star-24 .star-item{
		width: 10px;
		height: 10px;
		margin-right: 3px;
		background-size: 10px 10px;
	}
	.star.star-24 .star-item:last-child {
		margin-right: 0px;
	}
	.star.star-24 .star-item.on {
		bg-image('star24_on')
	}
	.star.star-24 .star-item.half {
		bg-image('star24_half')
	}
	.star.star-24 .star-item.off {
		bg-image('star24_off')
	}
</style>
